﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery放大镜（原创）-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
.main-area .main-wrap {
	width:1090px;
	margin:0 auto;
}
.main-area .main-wrap .scale {
	position:relative;
	margin:50px 0;
	float:left;
}
.main-area .main-wrap .scale .small {
	width:400px;
	height:400px;
	position:relative;
	border:1px solid #ddd;
	float:left;
}
.main-area .main-wrap .scale .small .smallpic {
	width:100%;
	height:100%;
}
.main-area .main-wrap .scale .small .smallmove {
	background:rgba(255,255,0,0.3);
	position:absolute;
	left:0;
	top:0;
	display:none;
	cursor:move;
}
.main-area .main-wrap .scale ul {
	position:absolute;
	bottom:-92px;
	left:0;
	margin-top:20px;
	width:400px;
}
.main-area .main-wrap .scale ul li {
	list-style:none;
	float:left;
	height:64px;
	line-height:64px;
	border:1px solid #ddd;
	width:64px;
	margin-left:20px;
	text-align:center;
}
.main-area .main-wrap .scale ul li img {
	width:100%;
	height:100%;
}
.main-area .main-wrap .scale ul li:nth-of-type(1) {
	width:33px;
	position:relative;
	margin-left:0;
	left:0;
	top:0;
}
.main-area .main-wrap .scale ul li:nth-of-type(5) {
	margin-right:0;
	position:absolute;
	right:0;
	top:0;
	width:33px;
}
.main-area .main-wrap .scale .big {
	width:400px;
	height:400px;
	position:absolute;
	top:0;
	left:430px;
	border:1px solid #ccc;
	float:left;
	margin-left:20px;
	overflow:hidden;
	display:none;
}
.main-area .main-wrap .scale .big .bigpic {
	position:absolute;
	left:0;
	top:0;
}
.main-area .main-wrap .pro_info {
	float:left;
	margin:50px 0 0 50px;
	width:638px;
	height:550px;
	text-align:left;
	font-size:12px;
}
.main-area .main-wrap .pro_info>section {
	padding:10px 0;
	margin:10px 0;
}
.main-area .main-wrap .pro_info .pro-title {
	padding-bottom:5px;
	margin-bottom:10px;
	font-size:20px;
	font-weight:900;
}
.main-area .main-wrap .pro_info .left-tit {
	color:#999;
	font-size:12px;
	margin-right:50px;
}
.main-area .main-wrap .pro_info .price-area {
	width:100%;
	line-height:30px;
	padding:10px 0;
	background:#ddd;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.main-area .main-wrap .pro_info .price-area .sell-price {
	color:#f00;
	font-size:30px;
	display:inline-block;
	vertical-align:middle;
}
.main-area .main-wrap .pro_info .price-area .freepost {
	display:inline-block;
	width:24px;
	height:18px;
	line-height:18px;
	padding:0 5px;
	margin:0 10px;
	background-color:pink;
	color:#fff;
	border-radius:3px;
}
.main-area .main-wrap .pro_info .activity .newactivity {
	width:48px;
	height:18px;
	padding:0 5px;
	background-color:#f00;
	color:#fff;
	margin-right:10px;
}
.main-area .main-wrap .pro_info .activity i {
	color:#f00;
}
.main-area .main-wrap .pro_info .postage .city {
	display:inline-block;
	width:70px;
	height:20px;
	line-height:20px;
	border:1px solid #999;
	text-align:center;
}
.main-area .main-wrap .pro_info .service {
	color:#333;
}
.main-area .main-wrap .pro_info .amount-box .num-goods {
	display:inline-block;
	border:1px solid #999;
	text-align:center;
}
.main-area .main-wrap .pro_info .amount-box .num-goods button {
	display:inline-block;
	width:25px;
	line-height:22px;
	font-size:20px;
	color:#333;
	border:none;
	outline:none;
	cursor:pointer;
}
.main-area .main-wrap .pro_info .amount-box .num-goods button:nth-of-type(1) {
	border-right:1px solid #999;
}
.main-area .main-wrap .pro_info .amount-box .num-goods button:nth-of-type(2) {
	border-left:1px solid #999;
}
.main-area .main-wrap .pro_info .amount-box .num-goods input {
	display:inline-block;
	border:none;
	width:40px;
	line-height:18px;
	text-align:center;
	vertical-align:text-bottom;
	outline:none;
}
.main-area .main-wrap .pro_info .buybtns {
	font-size:18px;
	text-align:center;
}
.main-area .main-wrap .pro_info .buybtns .buynow {
	display:inline-block;
	width:156px;
	height:46px;
	line-height:46px;
	border:2px solid #f00;
	background-color:#ffeced;
	color:#f00;
	margin-right:50px;
}
.main-area .main-wrap .pro_info .buybtns .buynow:hover {
	background-color:#fffaf8;
}
.main-area .main-wrap .pro_info .buybtns .addcart {
	margin-left:50px;
	display:inline-block;
	width:180px;
	height:50px;
	line-height:50px;
	background-color:#f00;
	color:#fff;
}
.show {
	display:block !important;
}
.hide {
	display:none !important;
}
</style>
</head>
<body>
<section class="main-area">
    <section class="main-wrap">
        <section class="scale">
            <div class="small">
                <img src="http://www.jq22.com/img/cs/500x500-1.png" class="smallpic">
                <div class="smallmove"></div>
            </div>
            <ul class="tab">
                <li class="left-btn btn">＜</li>
                <li>
                    <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
                </li>
                <li>
                    <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
                </li>
                <li>
                    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
                </li>
                <li class="right-btn btn">＞</li>
            </ul>
            <div class="big">
                <img src="http://www.jq22.com/img/cs/500x500-1.png" class="bigpic">
            </div>
        </section>
    </section>
</section>

<script>
 $(function() {
     function magnify() {
         var small = $('.small');
         var smallpic = $('.small .smallpic');
         var smallmove = $('.small .smallmove');
         var big = $('.scale .big');
         var bigpic = $('.big .bigpic');
         var tab = $('.tab li:not(.btn)');
         small.on('mouseover', function() {
             smallmove.removeClass('hide').addClass('show');
             big.removeClass('hide').addClass('show');
             smallmove.css({
                 "width": small.width() * big.width() / bigpic.width(),
                 "height": small.height() * big.height() / bigpic.height()
             });
         });
         small.on('mousemove', function(ev) {
             ev = ev || event;
             var sLeft = ev.pageX - small.offset().left - smallmove.width() / 2 - 1;
             var sTop = ev.pageY - small.offset().top - smallmove.height() / 2 - 1;
             if (sLeft <= 0) {
                 sLeft = 0;
             } else if (sLeft >= small.width() - 2 - smallmove.width()) {
                 sLeft = small.width() - 2 - smallmove.width();
             }
             if (sTop <= 0) {
                 sTop = 0;
             } else if (sTop >= small.height() - 2 - smallmove.height()) {
                 sTop = small.height() - 2 - smallmove.height();
             }
             smallmove.css({
                 left: sLeft,
                 top: sTop
             });
             var ratio = bigpic.width() / big.width();
             bigpic.css({
                 left: (-1) * sLeft * ratio,
                 top: (-1) * sTop * ratio
             });
         }).on('mouseout', function() {
             smallmove.addClass('hide').removeClass('show');
             big.addClass('hide').removeClass('show');
         });
         tab.on('mouseenter', function() {
             var newsrc = $(this).children().attr('src');
             small.children('img').attr('src', newsrc);
             big.children('img').attr('src', newsrc);
         })
     }
     magnify();
 })
</script>

</body>
</html>
